import { useRef, useEffect, useMemo } from "react"
import * as echarts from "echarts"

const Employee = ({ className, data = {} }) => {
  const chartRef = useRef()
  const { colors = [], labels = [], data: values = [], total = 0 } = data

  const option = useMemo(() => ({
    color: colors,
    tooltip: {
      trigger: "item"
    },
    legend: {
      bottom: "4%",
      left: "center",
      icon: "circle", // 设置为圆形
      itemWidth: 8, // 圆点宽度
      itemHeight: 8 // 圆点高度
    },
    series: [
      {
        type: "pie",
        grid: {
          top: 0, // 上边距
          bottom: 0 // 下边距加大，使图表整体上移
        },
        center: ["50%", "36%"],
        radius: ["60%", "70%"],
        avoidLabelOverlap: false,
        padAngle: 5,
        label: {
          show: false,
          position: "center"
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 40,
            fontWeight: "bold"
          }
        },
        labelLine: {
          show: false
        },
        data: values.map((item, index) => ({
          value: item,
          name: labels[index]
        }))
      }
    ]
  }), [colors, labels, values])

  const myChart = useRef(null)
  useEffect(() => {
    if (chartRef.current) {
      if (!myChart.current) {
        myChart.current = echarts.init(chartRef.current)
      }
      myChart.current.setOption(option)
    }
  }, [option])

  return (
    <div className={`${className} relative`}>
      <h3 className="text-lg font-bold">用工结构</h3>
      <div ref={chartRef} className="w-full h-[300px] mx-auto "></div>
      <div className="absolute top-[74px] left-1/2 -translate-x-1/2 0 w-[140px] h-[140px] border border-dashed rounded-full border-gray-400 flex flex-col justify-center items-center">
        <div className="text-center">
          <div className="text-[31px] font-bold">{total}</div>
          <div className="text-lg">总计（人）</div>
        </div>
      </div>
    </div>
  )
}

export default Employee
